<template>
  <div class="tend-label-root"
    :style="{borderColor: colors, color: colors}" >
    {{labels}}
  </div>
</template>

<script>
const tends = {0:'中性', 1:'正面', 2:'负面'}
const colors = {0:'#ff9000', 1:'#6ccac8', 2:'#e85d4b'}

export default {
  name: 'tend-label',
  props: ['tend'],
  data(){
    return {
      label: tends[this.tend],
      color: colors[this.tend]
    }
  },
  computed:{
    labels:function(){
      return this.label = tends[this.tend] 
    },
    colors:function(){
      return this.color = colors[this.tend]
    }

  }
}
</script>

<style lang="stylus" scoped>
.tend-label-root
  vertical-align top
  display inline-block
  width 4.5rem
  line-height 2.0rem
  border 1px solid grey
  border-radius 1rem
  box-sizing border-box
  text-align center
  font-size 0.88rem 
</style>